<template>
	<view style="text-align: center;">
		<view style="margin-top: 100px;">
			<image :src="inconFilePath" @click="updateImage()" mode="aspectFill" style="height: 290rpx; width: 290rpx; border-radius: 50%; margin-bottom: 40rpx;"></image>
			<view>
				<text v-if="data.wendu.date">
					福建省泉州市,{{ data.wendu.week }}:{{ data.wendu.ymd }},最高温{{ data.wendu.high }} 最低温{{ data.wendu.low }}
				</text>
				<text v-else>未获取到天气信息</text>
			</view>
			<view><button style="width: 460rpx; display:flex; justify-content: center;" @click="updateImage">选择图片显示</button></view>
			<view style="margin-top: 20rpx;"><button style="width: 460rpx; display:flex; justify-content: center;" @click="previewImage">预览图片</button></view>
			<view style="margin-top: 20rpx;"><button style="width: 460rpx; display:flex; justify-content: center;" @click="getImageInfo">获取图片信息</button></view>
			<view style="margin-top: 20rpx;"><button style="width: 460rpx; display:flex; justify-content: center;" @click="getWeatherInfo">天气预报</button></view>
			<view style="margin-top: 20rpx;"><button style="width: 460rpx; display:flex; justify-content: center;" @click="downloadNetworkImage">下载网络图片</button></view>
			<image :src="networkImagePath" mode="aspectFit" style="height: 300rpx; width: 300rpx; margin-bottom: 20rpx;"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inconFilePath: "/static/logo.png",
				networkImagePath: '', // 存储下载的网络图片路径
				data: {
					wendu: {
						date: '',     
						week: '',     
						ymd: '',      
						high: '',      
						low: ''        
					}
				}
			}
		},
		methods: {
			// 选择本地图片
			updateImage(){
				uni.chooseImage({
					count:1,
					sourceType:['album'],
					success: (res) => {
						console.log("updateImage choose:" + res.tempFilePaths[0]);
						this.inconFilePath = res.tempFilePaths[0];
						
					}
				});
			},

			// 预览图片
			previewImage(){
				uni.chooseImage({
					count:1,
					sourceType:['album'],
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						uni.previewImage({
							urls: res.tempFilePaths,
						});
					}
				});
			},
			
			// 获取图片信息
			getImageInfo(){
				uni.chooseImage({
					count:1,
					sourceType:['album'],
					success: (res) => {
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: (image) => {
								console.log(image.width + "," + image.height);
							}
						});
					}
				});
			},
			
			// 天气预报
			getWeatherInfo(){
				uni.request({
					url: 'https://t.weather.sojson.com/api/weather/city/101230501',
					success: (res) => {
						//console.log(("success----"+JSON.stringify(res)))
						const tomorrowWeather = res.data.data.forecast[1];
						this.data.wendu.date = tomorrowWeather.date;
						this.data.wendu.week = tomorrowWeather.week;
						this.data.wendu.ymd = tomorrowWeather.ymd;
						this.data.wendu.high = tomorrowWeather.high;
						this.data.wendu.low = tomorrowWeather.low;
					},
					fail: (eMsg) => {
						console.log("请求失败：", eMsg);
						this.data.wendu = {
							date: '',
							week: '',
							ymd: '',
							high: '',
							low: '获取失败'
						};
					}
				});
			},

			//下载网络图片并监听进度
			downloadNetworkImage() {
				const imageUrl = "https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg";
				const imageTask = uni.downloadFile({
					url: imageUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
							this.networkImagePath = res.tempFilePath; 
						}
					},
					fail: (err) => {
						console.error('下载失败:', err);
					}
				});

				// 监听下载进度
				imageTask.onProgressUpdate((res) => {
					console.log('下载进度:', res.progress + "%");
					console.log('已下载:', res.totalBytesWritten);
					console.log('总大小:', res.totalBytesExpectedToWrite);
				});
			}
		}
	}
</script>

<style>

</style>